// 内置模块，用于处理路径
let path = require("path");
// eslint插件，用于语法风格检查
// html插件，打包html文件
let HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 配置入口(多页面配置)
  entry: {
    // 一个页面对应一个入口文件
    index: "./src/index.js",
  },

  // 配置输出的目录和文件名
  output: {
    // 开发模式不生成实际文件
    path: path.resolve(__dirname, "./build"),
    // 设置打包后的文件名
    filename: "js/[name]-[hash:8].js",
  },

  // 加载器配置
  module: {
    rules: [
      // 配置loader
      {
        // 告诉webpack处理到.css文件时，使用use中的loader处理
        test: /\.css$/,
        // 使用use中的loader从右到左执行
        use: ["style-loader", "css-loader"],
      },
      {
        // 告诉webpack处理到.less文件时，使用use中的loader处理
        test: /\.less$/,
        // 使用use中的loader从右到左执行
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        // 告诉webpack处理到jpg jpeg png gif文件时
        test: /\.(jpe?g|png|gif)/,
        // 资源模块类型
        type: "asset", // 使用file-loader和url-loader
        generator: {
          // 打包后图片的存储路径和文件名称
          // [hash:8] 文件名为8位哈希值
          // [ext] 使用文件原来的后缀名
          filename: "./imgs/[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            // 设置当打包的图片小于指定的值时，编译成base64编码
            // 小于10kb的图片编译成base64编码
            // 好处：减少服务器请求次数
            // 坏处：base64编码后比原来的文件体积稍大一些
            maxSize: 10 * 1024,
          },
        },
      },
      {
        // 匹配到指定的资源时，使用下面的配置处理
        test: /\.(eot|ttf|woff2?|svg)$/,
        // 资源模块类型
        type: "asset/resource", // 相当于使用了file-loader
        generator: {
          // 设置打包后的存储目录和文件名
          filename: "./fonts/[hash:5][ext]",
        },
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/, // 排除这个目录不使用babel编译
      },
    ],
  },

  // 配置插件
  plugins: [
    new HtmlWebpackPlugin({
      // html插件配置
      // 指定 ./public/index.html 该文件作为模板打包
      template: path.join(__dirname, "public/index.html"),
      // 设置打包后html的存储路径(在dist中的路径)和文件名
      filename: "./index.html",
      // 当前页面使用入口key名为index的入口资源
      chunks: ["index"],
      // 打包 favicon.ico 图标
      favicon: path.join(__dirname, "public/favicon.ico"),
    }),
  ],

  // 配置模式
  mode: "development", // 开发模式
};
